window.onload = function () {
    var oCon = document.getElementById('list-content');
    var oMoreCon = document.getElementById('list-more');
    var oMore = oMoreCon.getElementsByTagName('a')[0];

    window.onscroll = function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var flag = true;
        if (getTop(oMore) + oMore.offsetHeight <= document.documentElement.clientHeight + scrollTop && flag) {
            ajax({
                method: 'post',
                url: './text.php',
                data: '',
                success: function (data) {
                    var data = JSON.parse(data);

                    if (!data.length) {
                        return false;
                    }
                    if (data.length < 5) {
                        oMore.innerHTML = '已经没有更多内容了';
                        flag = false;
                    }
                    
                    for(var i = 0, length1 = data.length; i < length1; i++){
                        if (data[i].style == 'style-1') {
                            var str = '<a href="'+data[i]['url']+'">'+data[i]['title']+'</a><p><span>'+data[i]['date']+'</span><span>'+data[i]['time']+'</span></p>';
                            var oDiv = document.createElement('div');
                            oDiv.setAttribute('class', 'style-1');
                            oDiv.innerHTML = str;
                            oCon.insertBefore(oDiv, oMoreCon);
                        } else if(data[i].style == 'style-2') {
                            var str = '<a class="list-title" href="'+data[i]['url']+'">'+data[i]['title']+'</a><p><span>'+data[i]['date']+'</span><span>'+data[i]['time']+'</span></p><a href="'+data[i]['url']+'" class="list-img"><img src="'+data[i]['images'][0]+'" alt=""></a>';
                            var oDiv = document.createElement('div');
                            oDiv.setAttribute('class', 'style-2');
                            oDiv.innerHTML = str;
                            oCon.insertBefore(oDiv, oMoreCon);
                        } else if (data[i].style == 'style-3') {
                            var str = '<a href="'+data[i]['url']+'" class="list-title">'+data[i]['title']+'</a><div><a href="'+data[i]['url']+'"><img src="'+data[i]['images'][0]+'" alt=""></a><a href="'+data[i]['url']+'"><img src="'+data[i]['images'][1]+'" alt=""></a><a href="'+data[i]['url']+'"><img src="'+data[i]['images'][2]+'" alt=""></a></div><p><span>'+data[i]['date']+'</span><span>'+data[i]['time']+'</span></p>';
                            var oDiv = document.createElement('div');
                            oDiv.setAttribute('class', 'style-3');
                            oDiv.innerHTML = str;
                            oCon.insertBefore(oDiv, oMoreCon);
                        } else {
                            return false;
                        }
                    }
                }
            })
        }
    }
}

function getTop(obj) {
    var iTop = 0;
    while(obj) {
        iTop += obj.offsetTop;
        obj = obj.offsetParent;
    }
    return iTop;
}

function ajax(jax) {
    var method = jax.method || 'get';
    var url = jax.url;
    var data = jax.data;
    var success = jax.success;
    var xhr = null;

    try {
        xhr = new XMLHttpRequest();
    } catch(e) {
        xhr = new ActiveXObject('Microsort.XMLHTTP');
    }

    if (method == 'get' && data) {
        url += '?' + data;
    }

    xhr.open(method, url, true);

    if (method == 'get') {
        xhr.send();
    } else {
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(data);
    }
    
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                success && success(xhr.responseText);
            } else {
                console.log("Error: " + xhr.status);
            }
        }
    }
}

